<template>
  <div class="filter-bar">
    <el-form :inline="true" label-width="70px" class="filter-form">
      <!-- 母设备选择 -->
      <el-form-item label="母设备">
        <el-select
          v-model="filters.muName"
          placeholder="请选择母设备"
          clearable
          filterable
          style="width: 220px"
          @change="doSearch"
        >
          <el-option
            v-for="item in muOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <!-- 关键字输入 -->
      <el-form-item>
        <el-input
          v-model="filters.keyword"
          placeholder="名称或编码关键字"
          clearable
          style="width: 220px"
          @keyup.enter="doSearch"
        />
      </el-form-item>

      <!-- 搜索与重置按钮 -->
      <el-form-item>
        <el-button type="primary" @click="doSearch">
          <el-icon><Search /></el-icon> 搜索
        </el-button>
        <el-button @click="resetFilters">
          <el-icon><Refresh /></el-icon> 重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";
import { listSbtz } from "@/api/sbtz/sbtz";

const props = defineProps({
  modelValue: { type: Array, default: () => [] },
});
const emit = defineEmits(["update:modelValue"]);

const filters = reactive({
  muName: null,
  keyword: "",
});

const muOptions = ref([]);

/** 初始化母设备下拉列表 */
async function loadMuOptions() {
  const { rows = [] } = await listSbtz({
    nodeType: "MACHINE",
    pageNum: 1,
    pageSize: 1000,
  });
  muOptions.value = rows;
}

/** 搜索接口 */
// async function doSearch() {
//   const params = {
//     id: filters.muName || null,
//     keyword: filters.keyword || null,
//     pageNum: 1,
//     pageSize: 1000,
//   };
//   const { rows = [] } = await listSbtz(params);
//   emit("update:modelValue", rows);
// }

async function doSearch() {
  let params = {
    id: filters.muName || null,
    keyword: filters.keyword || null,
    pageNum: 1,
    pageSize: 1000
  };

  // 第一次查母设备
  const { rows: roots = [] } = await listSbtz(params);

  // 第二次查所有设备（包含层级）
  const { rows: all = [] } = await listSbtz({ pageNum: 1, pageSize: 5000 });

  // 手动拼装子设备
  const rootIds = roots.map(r => r.id);
  const subTree = all.filter(d => {
    // 子设备的 parentId 在根母设备之下
    return rootIds.includes(d.parentId) || rootIds.includes(d.id);
  });

  emit("update:modelValue", subTree);
}

/** 重置 */
function resetFilters() {
  filters.muName = null;
  filters.keyword = "";
  doSearch();
}

onMounted(() => {
  loadMuOptions();
});
</script>

<style scoped>
.filter-bar {
  background: #fff;
  padding: 10px 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}

/* 行内表单对齐 */
.filter-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* 让按钮组与输入框居中对齐 */
.el-form-item {
  margin-bottom: 0 !important;
}
</style>
